// 注册mavonEditor组件
Vue.use(window.MavonEditor);

// 编辑内容页脚本
new Vue({
  el: '#app',
  data() {
    return {
      // 卡片数据
      cardUuid: '',
      cardContentUuid: '',
      cardTitle: '',
      cardContent: '',
      
      // 对话框显示状态
      uploadDialogVisible: false,
      attachmentDialogVisible: false,
      previewDialogVisible: false,
      
      // 上传文件列表
      imageFile: null,
      attachmentList: [],
      
      // 预览内容
      renderedContent: '',
      
      // Markdown编辑器配置
      markdownToolbars: {
        bold: true,
        italic: true,
        header: true,
        underline: true,
        strikethrough: true,
        mark: true,
        superscript: true,
        subscript: true,
        quote: true,
        ol: true,
        ul: true,
        link: true,
        imagelink: true,
        code: true,
        table: true,
        fullscreen: true,
        readmodel: true,
        htmlcode: true,
        help: true,
        undo: true,
        redo: true,
        trash: true,
        save: true,
        navigation: true,
        alignleft: true,
        aligncenter: true,
        alignright: true,
        subfield: true,
        preview: true,
      }
    };
  },
  created() {
    // 获取URL参数
    this.getUrlParams();
    
    // 获取卡片内容
    this.fetchCardContent();
    
    // 添加离开页面前的提示
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  },
  methods: {
    // 获取URL参数
    getUrlParams() {
      const urlParams = new URLSearchParams(window.location.search);
      this.cardUuid = urlParams.get('cardUuid') || '';
      this.cardContentUuid = urlParams.get('contentUuid') || '';
    },
    
    // 获取卡片内容
    fetchCardContent() {
      // 模拟从后端获取数据
      // 实际应用中应该调用后端API
      
      // 如果本地有缓存的内容，优先使用缓存
      const cachedContent = localStorage.getItem(`card_content_${this.cardUuid}`);
      const cachedTitle = localStorage.getItem(`card_title_${this.cardUuid}`);
      
      if (cachedContent) {
        this.cardContent = cachedContent;
        this.cardTitle = cachedTitle || '';
        console.log('从缓存加载内容');
      } else {
        // 模拟数据
        if (this.cardUuid) {
          this.cardTitle = '完成前端UI设计';
          this.cardContent = `# 前端UI设计任务

## 任务描述
使用Element UI组件库完成所有页面的设计和实现。

## 主要任务
- 首页设计
- 卡片详情页设计
- 编辑页面设计
- 登录注册页面设计

## 技术要求
1. 使用Vue.js + Element UI
2. 响应式设计，适配移动端和PC端
3. 代码规范和可维护性

> 需要确保UI美观、简洁、易用，并且能够适配不同设备。`;

          console.log('从服务器加载内容');
        }
      }
    },
    
    // 页面离开提示
    handleBeforeUnload(event) {
      // 如果内容已修改但未保存，提示用户
      if (this.isContentModified()) {
        const message = '您有未保存的内容，确定要离开吗？';
        event.returnValue = message;
        return message;
      }
    },
    
    // 判断内容是否被修改
    isContentModified() {
      const cachedContent = localStorage.getItem(`card_content_${this.cardUuid}`);
      const cachedTitle = localStorage.getItem(`card_title_${this.cardUuid}`);
      
      return this.cardContent !== cachedContent || this.cardTitle !== cachedTitle;
    },
    
    // 取消编辑
    cancelEdit() {
      if (this.isContentModified()) {
        this.$confirm('您有未保存的内容，确定要离开吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.goBack();
        }).catch(() => {
          // 用户取消离开
        });
      } else {
        this.goBack();
      }
    },
    
    // 返回上一页
    goBack() {
      // 实际应用中使用router或history返回
      console.log('返回上一页');
    },
    
    // 存为草稿
    saveAsDraft() {
      // 存储到本地缓存
      localStorage.setItem(`card_content_${this.cardUuid}`, this.cardContent);
      localStorage.setItem(`card_title_${this.cardUuid}`, this.cardTitle);
      
      this.$message({
        type: 'success',
        message: '已保存到草稿!'
      });
      
      // 返回上一页
      this.goBack();
    },
    
    // 保存内容
    saveContent() {
      if (!this.cardContent.trim()) {
        this.$message.warning('卡片内容不能为空');
        return;
      }
      
      // 模拟保存数据到后端
      // 实际应用中应该调用后端API
      console.log('保存卡片内容:', {
        cardUuid: this.cardUuid,
        cardContentUuid: this.cardContentUuid,
        title: this.cardTitle,
        content: this.cardContent
      });
      
      // 保存完成后清除本地缓存
      localStorage.removeItem(`card_content_${this.cardUuid}`);
      localStorage.removeItem(`card_title_${this.cardUuid}`);
      
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      
      // 返回上一页
      this.goBack();
    },
    
    // 显示上传图片对话框
    showUploadDialog() {
      this.uploadDialogVisible = true;
    },
    
    // 显示上传附件对话框
    showAttachmentDialog() {
      this.attachmentDialogVisible = true;
    },
    
    // 图片上传前检查
    beforeImageUpload(file) {
      const isImage = file.type.indexOf('image/') === 0;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('只能上传图片文件!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!');
        return false;
      }
      
      // 保存当前选择的文件
      this.imageFile = file;
      return false; // 阻止自动上传
    },
    
    // 附件上传前检查
    beforeAttachmentUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      
      if (!isLt10M) {
        this.$message.error('文件大小不能超过10MB!');
        return false;
      }
      
      // 添加到附件列表
      this.attachmentList.push({
        name: file.name,
        size: file.size,
        file: file
      });
      
      return false; // 阻止自动上传
    },
    
    // 处理图片上传
    handleImageUpload(options) {
      // 在实际应用中，这里需要将文件上传到服务器
      console.log('图片上传:', options);
    },
    
    // 处理附件上传
    handleAttachmentUpload(options) {
      // 在实际应用中，这里需要将文件上传到服务器
      console.log('附件上传:', options);
    },
    
    // 确认图片上传
    confirmImageUpload() {
      if (!this.imageFile) {
        this.$message.warning('请先选择图片');
        return;
      }
      
      // 模拟上传图片到服务器并获取URL
      // 实际应用中应该调用后端API上传图片
      const reader = new FileReader();
      reader.onload = (e) => {
        // 将图片插入到Markdown内容中
        const imageUrl = e.target.result;
        const imageMarkdown = `![${this.imageFile.name}](${imageUrl})`;
        
        // 在光标位置插入图片，或者追加到内容末尾
        this.cardContent += '\n\n' + imageMarkdown;
        
        this.$message({
          type: 'success',
          message: '图片插入成功!'
        });
        
        // 关闭对话框
        this.uploadDialogVisible = false;
        this.imageFile = null;
      };
      
      reader.readAsDataURL(this.imageFile);
    },
    
    // 确认附件上传
    confirmAttachmentUpload() {
      if (this.attachmentList.length === 0) {
        this.$message.warning('请先选择附件');
        return;
      }
      
      // 模拟上传附件到服务器
      // 实际应用中应该调用后端API上传附件
      
      // 将附件插入到Markdown内容中
      let attachmentMarkdown = '\n\n### 附件列表\n';
      
      this.attachmentList.forEach((item, index) => {
        attachmentMarkdown += `${index + 1}. [${item.name}](#)\n`;
      });
      
      // 追加到内容末尾
      this.cardContent += attachmentMarkdown;
      
      this.$message({
        type: 'success',
        message: '附件插入成功!'
      });
      
      // 关闭对话框
      this.attachmentDialogVisible = false;
      this.attachmentList = [];
    },
    
    // 预览内容
    previewContent() {
      // 使用marked将Markdown转换为HTML
      this.renderedContent = marked.parse(this.cardContent);
      this.previewDialogVisible = true;
    }
  }
}); 